<!-- Hyplus 导航 - Profile - Main (Bio + Stylesheet + Script)
 Code type: Universal Snippet (HTML + CSS + PHP)
 Shortcode: [wpcode id="14379"]
-->
<style>
    body {
        background: #f6f8fa;
    }
    .profile-main-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 900px;
        margin: 40px auto;
        padding: 0;
        align-items: stretch;
        box-sizing: border-box;
        justify-content: center;
    }
    .profile-main-col {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .profile-main-col.left {
        flex: 1 1 320px;
        min-width: 200px;
        max-width: 380px;
        box-sizing: border-box;
    }
    .profile-main-col.right {
        flex: 2 1 0;
        min-width: 0;
        box-sizing: border-box;
    }
    .profile-card,
    .profile-panel {
        background: #f9fbfd;
        border-radius: 22px;
        box-shadow: 0 4px 24px #0001, 0 1.5px 6px #0001;
        padding: 36px 28px 32px 28px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        box-sizing: border-box;
    }
    .profile-card {
        justify-content: center;
    }
    .profile-panel {
        min-height: 340px;
        justify-content: flex-start;
    }
    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #3498db;
        background: #fff;
        margin-bottom: 18px;
        box-shadow: 0 2px 8px #0002;
    }
    /* 使用艺术字样式显示个人简介行 */
    .profile-desc {
        color: #222;
        font-size: 1.13em;
        margin-bottom: 18px;
        font-family: "Dancing Script", "Segoe Script", "Comic Sans MS", cursive, sans-serif;
        font-weight: 600;
    }
    .profile-desc a {
        color: inherit;
        text-decoration: none;
    }
    .profile-desc a:hover {
        text-decoration: none;
    }
    
    .profile-links {
        line-height: 1.7;
        margin-bottom: 0;
    }
    .profile-links a {
        margin: 0 4px;
    }
    .profile-tabs {
        display: flex;
        gap: 12px;
        margin-bottom: 18px;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;
    }
    .profile-tab-btn {
        flex: 1 1 120px;
        min-width: 80px;
        max-width: 220px;
        background: #fff;
        border: 1.5px solid #e0e4ea;
        color: #3a466e;
        font-size: 1.08em;
        font-weight: 500;
        border-radius: 16px;
        padding: 7px 22px 7px 18px;
        cursor: pointer;
        outline: none;
        display: flex;
        align-items: center;
        gap: 7px;
        transition: background 0.18s, color 0.18s, border 0.18s;
        justify-content: center;
        box-sizing: border-box;
    }
    .profile-tab-btn.active {
        background: #f3f6fa;
        color: #1a2a4a;
        border: 2px solid #b3c6e0;
        font-weight: bold;
    }
    .profile-tab-btn svg {
        opacity: 0.8;
    }
    .profile-tab-content {
        display: none;
        width: 100%;
    }
    .profile-tab-content.active {
        display: block;
    }
    .profile-repo-list {
        display: flex;
        flex-wrap: wrap;
        gap: 22px;
        margin-top: 8px;
        justify-content: center;
    }
    .profile-repo-item {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 8px #0001;
        padding: 18px 18px 12px 18px;
        width: 300px;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .profile-repo-title {
        font-size: 1.18em;
        font-weight: bold;
        color: #2563eb;
        margin-bottom: 4px;
        text-decoration: none;
        display: block;
        text-align: center;
    }
    .profile-repo-desc {
        color: #222;
        font-size: 1.08em;
        margin-bottom: 0;
        text-align: center;
    }
    .profile-stats-img {
        width: 100%;
        max-width: 340px;
        border-radius: 12px;
        box-shadow: 0 2px 8px #0002;
        margin-bottom: 18px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .profile-stats-counts {
        font-size: 1.25em;
        font-weight: bold;
        color: #222;
        text-align: center;
    }
    .profile-stats-counts .highlight {
        color: #f39c12;
        font-weight: bold;
    }
    .profile-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 10px;
        justify-content: center;
    }
    .profile-badge {
        display: inline-block;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }
    .profile-badge img {
        display: inline-block;
        vertical-align: middle;
    }
    .recent-posts-block-title {
        font-size: 25px;
        font-weight: 600;
    }
    .profile-info-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    .profile-info-text {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    @media (max-width: 768px) {
        .profile-info-card {
            flex-direction: column;
            gap: 5px;
            align-items: center;
        }
    }
    @media screen and (min-width: 769px) {
        .profile-card-mobile-categories {
            display: none;
        }
    }
</style>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap" rel="stylesheet" />
<div class="profile-main-row">
    <div class="profile-card profile-info-card">
        <img class="profile-avatar" src="https://www.hyperplasma.top/wp-content/uploads/2025/01/Snipaste_2023-12-08_19-40-36-150x150.png" alt="konoha" />
        <div class="profile-info-text">
            <div class="profile-desc"><a href="https://www.hyperplasma.top/user/akira37/" target="_blank" rel="noopener">Akira&nbsp;-&nbsp;Hyperplasma&nbsp;-&nbsp;Hyplus</a></div>
            <!-- <div class="hyplus-nav-container hyplus-unselectable" style="grid-template-columns: 1fr; padding-bottom: 16px">
                <div class="hyplus-nav-links profile-links">
                    <div class="hyplus-nav-group">
                        <a href="https://github.com/hyperplasma" target="_blank" class="hyplus-nav-link">GitHub</a>
                        <a href="https://gitee.com/hyperplasma" target="_blank" class="hyplus-nav-link">Gitee</a>
                        <a href="https://akira.blog.csdn.net" target="_blank" class="hyplus-nav-link">CSDN</a>
                    </div>
                    <div class="hyplus-nav-group">
                        <a href="https://steamcommunity.com/id/hyperplasma/" class="hyplus-nav-link">Steam</a>
                        <a href="https://space.bilibili.com/12103859" target="_blank" class="hyplus-nav-link">Bilibili</a>
                        <a href="http://hyperplasma.ysepan.com" target="_blank" class="hyplus-nav-link">开放网盘</a>
                    </div>
                    <div class="hyplus-nav-group">
                        <a href="http://kina.hyperplasma.top" class="hyplus-nav-link">KINA-Next</a>
                        <a href="https://www.hyperplasma.top/media/" class="hyplus-nav-link">媒体库</a>
                        <a href="https://www.hyperplasma.top/game/" class="hyplus-nav-link">娱乐中心</a>
                    </div>
                </div>
            </div> -->
            <div class="profile-badges">
                <span class="profile-badge"><img src="https://img.shields.io/badge/HP-Hyperplasma-blue" alt="Hyperplasma" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/Java-%23ED8B00.svg?logo=openjdk&logoColor=white" alt="Java" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/Spring%20Boot-6DB33F?logo=springboot&logoColor=fff" alt="Spring Boot" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/Go-%2300ADD8.svg?&logo=go&logoColor=white" alt="Go" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/php-%23777BB4.svg?&logo=php&logoColor=white" alt="PHP" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/WordPress-%2321759B.svg?logo=wordpress&logoColor=white" alt="WordPress" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=fff" alt="MySQL" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/Redis-%23DD0031.svg?logo=redis&logoColor=white" alt="Redis" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/C++-%2300599C.svg?logo=c%2B%2B&logoColor=white" alt="Cpp" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/Rust-%23000000.svg?e&logo=rust&logoColor=white" alt="Rust" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/Python-3776AB?logo=python&logoColor=fff" alt="Python" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/PyTorch-ee4c2c?logo=pytorch&logoColor=white" alt="PyTorch" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/HTML-%23E34F26.svg?logo=html5&logoColor=white" alt="HTML" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/CSS-639?logo=css&logoColor=fff" alt="CSS" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000" alt="JavaScript" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/Markdown-%23000000.svg?logo=markdown&logoColor=white" alt="Markdown" /></span>
                <span class="profile-badge"><img src="https://img.shields.io/badge/macOS-000000?logo=apple&logoColor=F0F0F0" alt="macOS" /></span>
            </div>
            <div class="profile-stats-counts"><?php echo do_shortcode('[site_content_counts]'); ?></div>
        </div>
    </div>
</div>